Debounce And Throttle Explained with Examples

That’s where Throttle and Debounce come to the rescue! In this blog, I’ll explain the difference between throttle and debounce with real-world examples, code snippets, and when to use each one.

# [JavaScript] debounce 及 throttle ###### tags: `前端筆記` ## 這兩個的功用是是什麼？ 兩個都是藉由 `closure`（閉包）實作的優化觸發事件的手段，以減少重複觸發事件，避免短時間重複觸發事件，造成重複執行不需要的行為（如重複執行 API call 的行為）。

這次要介紹的是 JS 實作 Debounce 和 Throttle，它們都有助於 JS 執行上效能的優化，怎麼說呢? 由於在網頁上進行滑鼠移動 (mousemove event) 或上下滾動視窗 (scroll event)，又或是視窗縮放時，會觸發多次的 DOM 監聽事件，但其實也有可能只需要經過反覆調整後的最終畫面，那這樣短時間內觸發過多次的事件將會造成效能上的不佳，因此就需要 Debounce 和 Throttle 減少事件的觸發。 在「ithelp.ithome.com.tw」查看更多資訊 透過

本文詳細介紹了防抖（Debounce）和節流（Throttle）的概念、區別及其在實際開發中的應用場景。

這篇文章將會探討 debounce 和 throttle 這兩種用於最佳化事件處理的關鍵技術，並且詳解如何自己手寫實作 debounce 和 throttle。

前端工程师们都听过看起来很高级的词，节流和防抖，其实节流就是throttle，防抖就是debounce，其实这个也属于前端性能优化的一部分。